<template>
  <van-nav-bar
    title="登录"
    left-text="返回"
    left-arrow
    @click-left="
      () => {
        $router.back('/register');
      }
    "
  />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="reactiveFrom.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{  required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="reactiveFrom.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{  required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        @click="dl"
      >
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { reactive } from "vue";
const reactiveFrom = reactive({
  username: "",
  password: "",
});

import { showToast } from "vant";
import { useRouter } from "vue-router";
let router = new useRouter();
import {loginApi} from '@/api/api'

const dl=()=>{
    loginApi(reactiveFrom.username,reactiveFrom.password).then((res)=>{
        console.log('登录数据',res)
        if(res.data.code==0){
            showToast({
                type:'success',
                message:'登录成功',
                duration:2000,
                onClose(){
                    router.push('/')
                }
            })
            localStorage.setItem('username',reactiveFrom.username)
            localStorage.setItem('token',res.data.token)
        }
        else{
            showToast({
                type:'fail',
                message:'登录失败',
                duration:2000,
            })
        }
    })
}
</script>

<style lang="scss" scoped></style>
